<template>
    <div class="dxd">
        <div class="showPart">
            <Spin v-if="loadFormStatus" fix>
                <Icon type="ios-loading" size=30 class="demo-spin-icon-load"></Icon>
                <div>加载数据....</div>
            </Spin>
            <div v-html="formsHtml" align="center"></div>
        </div>
        <div class="btnPart">
            <Form :model="params" :label-width="100">
                <FormItem label="设备类型">
                    <Select :transfer="true" v-model="params.type" placeholder="选择类型" style="width: 200px;"
                            @on-change="selectChange">
                        <Option v-for="(item, index) in typeSelections" :key="index" :value="item.name">{{item.name}}
                        </Option>
                    </Select>
                    -->
                    <Select :transfer="true" v-model="params.name" placeholder="选择设备" style="width: 200px;"
                            :clearable="true">
                        <Option v-for="(item, index) in sonSlections" :key="index" :value="item.name">{{item.name}}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="时间粒度" prop="lidu">
                    <RadioGroup v-model="params.lidu">
                        <Radio :label="item.value" v-for="(item, index) in liduSelections" :key="index">{{item.name}}
                        </Radio>
                    </RadioGroup>
                </FormItem>
                <!--dgfd-->
                <FormItem label="时间范围" v-show="params.type !== '累积用量汇总'">
                    <DatePicker :transfer="true" style="width: 200px;" type="datetime" placeholder="开始时间"
                                v-model="params.sTime"></DatePicker>
                    -->
                    <DatePicker :transfer="true" style="width: 200px;" type="datetime" placeholder="结束时间"
                                v-model="params.eTime"></DatePicker>
                </FormItem>
                <FormItem label="时间范围" v-show="params.type === '累积用量汇总'">
                    <DatePicker :transfer="true" style="width: 200px;" type="datetime" placeholder="时间"
                                v-model="params.singTime"></DatePicker>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="doQuery" style="width: 200px;" :loading="loadFormStatus">查询数据
                    </Button>
                    <Button type="primary" @click="downLoad" style="margin-left: 10px;width: 200px;"
                            :loading="downLoading" :disabled="!formsHtml">下载文件
                    </Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'DataForm',
        mounted: function () {
          this.sonSlections=this.typeSelections[0].sons,
          this.doQuery();
        },
        data () {
          var curDate = new Date();
            return {
                formsHtml: '',
                loadFormStatus: false,
                downLoading: false,
                params: {
                    type: '冷干机',
                    name: '1#冷干机',
                    sTime: curDate.getFullYear() + '-' + (curDate.getMonth() +1)+ '-' + curDate.getDate() +' '+'00:00:00',
                    eTime: curDate.getFullYear() + '-' + (curDate.getMonth() +1)+'-' + curDate.getDate() +' '+'23:59:59',
                    lidu: '%Y-%m-%d %H'   //
                },
                typeSelections: [
                    {
                        name: '冷干机',
                        sons: [
                            {name: '1#冷干机'},
                            {name: '2#冷干机'},
                            {name: '3#冷干机'},
                            {name: '4#冷干机'},
                            {name: '5#冷干机'},
                            {name: '6#冷干机'}
                        ]
                    },
                    {
                        name: '离心机',
                        sons: [
                            {name: '1#离心机'},
                            {name: '2#离心机'},
                            {name: '3#离心机'},
                            {name: '4#离心机'}
                        ]
                    },
                    {
                        name: '螺杆机',
                        sons: [
                            {name: '1#螺杆机'},
                            {name: '2#螺杆机'},
                            {name: '3#螺杆机'}
                        ]
                    },
                    {
                        name: '末端车间',
                        sons: [
                            {name: '冲压车间末端'},
                            {name: '焊装车间末端'},
                            {name: '涂装车间末端'},
                            {name: '总装车间末端'},
                            {name: '树脂车间末端'},
                            {name: '铸造车间末端'},
                            {name: '机加车间末端'}
                        ]
                    },
                    {
                        name: '供气总管',
                        sons: []
                    },
                    {
                        name: '累积用量汇总',
                        sons: []
                    }
                ],
              sonSlections:[],
                liduSelections: [
                    {
                        name: '分',
                        value: '%Y-%m-%d %H:%i'
                    },
                    {
                        name: '时',
                        value: '%Y-%m-%d %H'
                    },
                    {
                        name: '天',
                        value: '%Y-%m-%d'
                    },
                    {
                        name: '月',
                        value: '%Y-%m'
                    }
                ]
            }
        },
        methods: {
            doQuery () {
                if (this.params.sTime instanceof Date) {
                    this.params.sTime = this.params.sTime.format('yyyy-MM-dd hh:mm:ss')
                }
                if (this.params.eTime instanceof Date) {
                    this.params.eTime = this.params.eTime.format('yyyy-MM-dd hh:mm:ss')
                }
                if (this.params.singTime instanceof Date) {
                    this.params.singTime = this.params.singTime.format('yyyy-MM-dd hh:mm:ss')
                }

              if (this.params.type === '累积用量汇总' && !this.params.singTime) {
                  this.$Message.info('请选择时间点，再执行查询')
                return
              }
                this.loadFormStatus = true
                window.myapi.do_post('file/form', this.params).then(resp => {
                    this.formsHtml = ''
                    if (resp.status === 200) {
                        this.formsHtml = resp.data
                    }
                }).finally(() => {
                    this.loadFormStatus = false
                })
            },
            downLoad () {
                // 下载文件
                if (this.params.sTime instanceof Date) {
                    this.params.sTime = this.params.sTime.format('yyyy-MM-dd hh:mm:ss')
                }
                if (this.params.eTime instanceof Date) {
                    this.params.eTime = this.params.eTime.format('yyyy-MM-dd hh:mm:ss')
                }
                this.downLoading = true
                window.myapi.do_download('file/dform', this.params).then(resp => {
                    if (resp.status === 200 && resp.data) {
                        let url = window.URL.createObjectURL(new Blob([resp.data], {type: resp.data.type}))

                        let filename = decodeURI(resp.headers['content-disposition'].split(';')[1].trim().substr(
                            'filename='.length))

                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', filename)

                        document.body.appendChild(link)
                        link.click()
                    }
                }).finally(() => {
                    this.downLoading = false
                })
            },
            selectChange (name) {
                console.info('selectChange', name)
                this.sonSlections = this.typeSelections.find(item => item.name === name).sons
                this.params.name = ''
            }
        }
    }
</script>

<style scoped>
    .dxd {
        width: 100%;
        padding: 5px;
    }

    .showPart {
      width: 100%;
      overflow: auto;
      border: solid 1px #cfcecc;
      background: #f0ecec;
      padding: 20px 10px;
    }

    /*2k*/
    @media screen and (min-width: 1921px) {
        .dxd {
            height: 1100px
        }

      .showPart {
        height: 90%;
      }
    }

    /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
    @media screen and (max-width: 1920px)  and (min-width: 1601px) {
        .dxd {
            height: 915px;
        }

      .showPart {
        height: 85%;
      }
    }

    /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
    @media screen and (max-width: 1600px) and (min-width: 900px) {
        .dxd {
            height: 700px;
        }

      .showPart {
        height: 65%;
      }
    }
    /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
    @media screen and (max-width: 900px) {
        .dxd {
            height: 530px;
        }

      .showPart {
        height: 65%;
      }
    }

    .btnPart {
        padding-top: 10px;
        width: 100%;
        height: 15%;
    }

    .demo-spin-icon-load {
        animation: ani-demo-spin 0.6s linear infinite;
    }

    .loadS {
        margin-top: 300px;
    }

    .dxsa {
        width: 50%;
        padding: 5px;
    }

    .fgfg {
        padding-bottom: 10px;
    }
</style>
